<template>
  <div class="topic-container">
    <!-- 左侧话题列表 -->
    <div class="topic-list">
      <div class="topic-header">
        <h2>热门话题</h2>
        <Button 
          type="primary" 
          icon="md-add" 
          v-show="isLogin"
          @click="showCreateTopicModal">
          创建话题
        </Button>
      </div>

      <List>
        <ListItem v-for="(topic, index) in topics" 
                  :key="index"
                  :class="{'active-topic': currentTopic === index}"
                  @click="selectTopic(index)">
          <ListItemMeta>
            <template slot="title">
              # {{ topic.title }}
            </template>
            <template slot="description">
              {{ topic.description }}
            </template>
          </ListItemMeta>
          <template slot="action">
            <Icon type="ios-eye-outline" /> {{ topic.views }}
            <Icon type="ios-chatbubbles-outline" /> {{ topic.posts }}
          </template>
        </ListItem>
      </List>
    </div>

    <!-- 右侧话题内容 -->
    <div class="topic-content">
      <div v-if="currentTopic !== null">
        <div class="topic-content-header">
          <h1># {{ topics[currentTopic].title }}</h1>
          <p>{{ topics[currentTopic].description }}</p>
        </div>
        
        <!-- 话题下的帖子列表 -->
        <SXQFriendUpdateList 
          :friend-list="topicPosts" 
          :callback="loadTopicPosts"/>
      </div>
      <div v-else class="no-topic-selected">
        <Icon type="ios-paper" size="48"/>
        <p>请选择一个话题查看详情</p>
      </div>
    </div>

    <!-- 创建话题的弹窗 -->
    <Modal
        v-model="createTopicModal"
        title="创建新话题"
        @on-ok="createTopic"
        @on-cancel="createTopicModal = false">
      <Form :model="newTopic" :label-width="80">
        <FormItem label="话题名称">
          <Input v-model="newTopic.title" placeholder="请输入话题名称"/>
        </FormItem>
        <FormItem label="话题描述">
          <Input 
            v-model="newTopic.description" 
            type="textarea" 
            :rows="4"
            placeholder="请输入话题描述"/>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import SXQFriendUpdateList from "@/components/SXQ-FriendUpdateList";

export default {
  name: "TopicPage",
  components: {
    SXQFriendUpdateList
  },
  data() {
    return {
      topics: [
        {
          title: "技术探讨",
          description: "分享技术经验，解决技术难题",
          views: 1200,
          posts: 156
        },
        {
          title: "生活分享",
          description: "分享生活中的趣事和感悟",
          views: 890,
          posts: 234
        },
        {
          title: "职场经验",
          description: "交流职场经验，分享成长历程",
          views: 567,
          posts: 89
        }
      ],
      currentTopic: null,
      topicPosts: [],
      createTopicModal: false,
      newTopic: {
        title: "",
        description: ""
      }
    };
  },
  computed: {
    isLogin() {
      return this.$store.state.isLogin === "true";
    }
  },
  methods: {
    selectTopic(index) {
      this.currentTopic = index;
      this.loadTopicPosts();
    },
    
    loadTopicPosts() {
      // 模拟加载话题下的帖子
      // TODO: 替换为实际的API调用
      this.topicPosts = [
        {
          id: 1,
          title: "示例帖子标题",
          content: "这是一个示例帖子内容",
          img: "https://example.com/image.jpg",
          nums: [100, 50, 20, 10, 5], // 点击、点赞、评论、收藏、分享数
          createTime: "2024-03-20 10:00:00",
          avatar: "https://example.com/avatar.jpg",
          nickname: "用户昵称",
          userId: 1
        }
      ];
    },

    showCreateTopicModal() {
      if (!this.isLogin) {
        this.$Message.warning("请先登录");
        return;
      }
      this.createTopicModal = true;
    },

    createTopic() {
      // TODO: 实现创建话题的API调用
      this.topics.push({
        title: this.newTopic.title,
        description: this.newTopic.description,
        views: 0,
        posts: 0
      });
      
      this.$Message.success("话题创建成功");
      this.newTopic.title = "";
      this.newTopic.description = "";
    }
  }
};
</script>

<style scoped>
.topic-container {
  display: flex;
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;
  gap: 20px;
}

.topic-list {
  flex: 0 0 300px;
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.topic-content {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.topic-content-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.active-topic {
  background: #f0f2f5;
}

.no-topic-selected {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
}

.no-topic-selected p {
  margin-top: 16px;
}
</style>